<template>
  <wx-tables
    :columns="columns"
    title="门卫管理"
    :data-source="dataSource"
    :loading="loading"
    :total="total"
    :size.sync="size"
    :page.sync="page"
  >
    <!-- tools -->
    <template #tools>
      <!--      <el-button type="primary" class="table-btn" @click="handleOpenForm()">添加账号</el-button>-->
      <!--      <el-button class="table-btn" icon="el-icon-refresh-right" @click="handleGetTable">刷新</el-button>-->
    </template>
    <template v-slot:role="record">
      {{ SELECT_ROLE[record.row.role] }}
    </template>
    <template v-slot:real_name="record">
      {{ record.row.real_name || record.row.phonenum}}
    </template>
    <template v-slot:oper="record">
      <div class="oper-box">
        <span><el-link type="primary" @click="handleOpenForm(record.row.id,editCon,record.row)">编辑</el-link></span>
        <span><el-link type="primary" @click="handleOpenRole(record.row)">更改角色</el-link></span>
        <el-popconfirm
          :ref="`popover-${record.$index}`"
          title="确定注销当前门卫吗？"
          @confirm="handleSetStatus(record.row)"
        >
          <el-link slot="reference" type="primary">{{ record.row && record.row.status === 0 ? '启用':'注销' }}</el-link>
        </el-popconfirm>
        <!--        <span><el-link type="primary" @click="handleChangeJanitor(record.row)">更改角色</el-link></span>-->
      </div>
    </template>
    <wx-dialog
      ref="myDialog"
      :visible.sync="formVisibleRole"
      title="更改角色"
      width="500px"
      @ok="handleChangeRole"
    >
      <el-form ref="ruleForm" :rules="ruleForm" :model="formInfo" label-position="left" label-width="100px">
        <el-form-item label="更改角色" prop="janitor_name">
          <el-select v-model="formInfo.role" placeholder="请选择角色">
            <el-option
              v-for="(item,ins) of SELECT_ROLE_LIST"
              :key="ins"
              :label="item.tabel"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </wx-dialog>
    <wx-dialog
      ref="myDialog"
      :visible.sync="formVisible"
      title="编辑"
      width="500px"
      @ok="handleSaveForm"
    >
      <div>
        <el-form ref="ruleForm" :rules="ruleForm" :model="formInfo" label-position="left" label-width="100px">
          <el-form-item label="账号名称" prop="account_user">
            <span>{{ formInfo.phonenum }}</span>
          </el-form-item>
          <el-form-item label="门卫名称" prop="real_name">
            <el-input v-model="formInfo.real_name" />
          </el-form-item>
        </el-form>
      </div>
    </wx-dialog>
  </wx-tables>
</template>

<script>
import WxDialog from '@/components/WxDialog'
import WxTables from '@/components/WxTables'
import TableMixins from '@/components/WxTables/mixins'
import { SELECT_ROLE, SELECT_ROLE_LIST } from '@/views/constants'
export default {
  name: 'Janitor',
  components: {
    WxDialog,
    WxTables
  },
  mixins: [TableMixins],
  data() {
    return {
      SELECT_ROLE_LIST,
      editCon: ['phonenum', 'real_name', 'role'],
      editJanitor: false,
      changeRole: false,
      columns: [
        { config: { type: 'index', width: 100 }, label: '序号' },
        { dataIndex: 'real_name', label: '名称' ,slots: true},
        { dataIndex: 'phonenum', label: '账号' },
        { dataIndex: 'role', label: '角色', slots: true },
        { dataIndex: 'oper', label: '操作', slots: true }
      ],
      markId: 'id',
      // 查询表格API
      api: 'api/adminPortal/accountUser/getListByCon?role=guard',
      // 接口前缀 修改
      baseApi: 'api/adminPortal/accountUser/',
      ruleForm: {
        real_name: { required: true, message: '请填写姓名', trigger: 'blur' }
      },
      SELECT_ROLE
    }
  },
  methods: {
    handleResetRole() {}
  }
}
</script>
<style lang="scss" src="./style/index.scss" scoped/>
